<template>
    <div class="w-100 h-100" >
      <div
      style="width: 100%; height: 10%; position: absolute; top: 0; right: 0"
      class="d-flex justify-content-end"
    >
     <lineLabel :shapeColor="'#5CE1FF'" text="去年"> </lineLabel>
      <lineLabel
        style="margin-left: 20px"
        :shapeColor="'#B8EB8F'"
        text="今年"
      >
      </lineLabel>
    </div>
      <div  class="w-100 h-100">
        <div id="yzhlqs" style="width: 100%; height: 100%"></div>
      </div>
    </div>
  </template>
  
  <script setup lang="ts">
  import * as echarts from "echarts";
  import tablleBar from "@/components/project/tablleBar.vue";
  import { useOptions } from "@/hook/useOptions";
  import lineLabel from "@/components/project/lineLabel.vue";
  const hb = ['墨水湖', '龙阳湖', '月湖', '莲花湖']
  const colorSingleList = ["rgba(3, 230, 254, 1)", "rgba(184, 235, 143, 1)"];

  const props = defineProps({
    type: {
        default: 0
    },
    year: {
        default: 2024
    },
    month: {
        default: 1
    }
  })

  let activeItem = ref(0)

  const swichTable = (item: any) => {
    activeItem.value = item;
  };
  
  const jsonData: any = inject("jsonData");
  const current = computed(() => {
    let data = [[], []];
    try {
      data = jsonData.value.yxjk.jxpg[props.type][props.year][props.month];
    } catch (error) {}
    return data;
  });
  let myChart: any;
  
  watch(
    () => current.value,
    (val) => {
      if (val) {
        const data = [[9,0,12,13,7,11,1,10,12,4,13,2],[1,0,10,1,0,3,5,2,0,2,3,8]]
        myChart.setOption({
          series: [{ data: data[0] },{ data: data[1]}],
        });
      }
    }
  );
  
  onMounted(() => {
    let option: any = {
      color: colorSingleList,
      tooltip: {
        show: true,
        trigger: "axis",
        axisPointer: {
          type: "shadow",
        },
        backgroundColor: "rgba(255,255,255,0.75)",
        extraCssText: "box-shadow: 2px 2px 4px 0px rgba(0,0,0,0.3);",
        textStyle: {
          fontSize: 14,
          color: "#000",
        },
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "5%",
        top: "14%",
        containLabel: true,
      },
      //你的代码
      xAxis: {
        name: '',
        type: "category",
        data: useOptions().month,
        axisLine: {
          show: true,
          lineStyle: {
            width: 1,
            color: "#667A8E",
          },
        },
        axisLabel: {
          textStyle: {
            fontSize: 20,
            color: "#667A8E",
          },
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: [
        {
          name: "个",
          type: "value",
          nameTextStyle: {
            color: "#8994A3",
            fontSize: 20,
          },
          axisLabel: {
            fontSize: 20,
            color: "#667A8E",
            formatter: "{value}" + "",
          },
          splitLine: {
            // 配置分割线
            show: true,
            lineStyle: {
              color: "rgba(92, 225, 255, 0.5)", // 蓝色分割线
              type: "solid", // 实线
            },
          },
        },
      ],
      series: [
        {
          name: "",
          type: "line",
          data: [],
          color: "rgba(3, 230, 254, 1)",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(3, 230, 254, 0.8)", // 颜色渐变起始颜色
                },
                {
                  offset: 1,
                  color: "rgba(3, 230, 254, 0)", // 颜色渐变结束颜色
                },
              ]),
            },
          },
        },
        {
          name: "",
          type: "line",
          data: [],
          color: "rgba(184, 235, 143, 1)",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(184, 235, 143, 0.8)", // 颜色渐变起始颜色
                },
                {
                  offset: 1,
                  color: "rgba(184, 235, 143, 0)", // 颜色渐变结束颜色
                },
              ]),
            },
          },
        },
        {
          name: "",
          type: "line",
          data: [],
          color: "rgba(230,253,255, 1)",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(230,253,255, 0.8)", // 颜色渐变起始颜色
                },
                {
                  offset: 1,
                  color: "rgba(230,253,255, 0)", // 颜色渐变结束颜色
                },
              ]),
            },
          },
        },
        {
          name: "",
          type: "line",
          data: [],
          color: "rgba(96,255,206, 1)",
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(96,255,206, 0.8)", // 颜色渐变起始颜色
                },
                {
                  offset: 1,
                  color: "rgba(96,255,206, 0)", // 颜色渐变结束颜色
                },
              ]),
            },
          },
        },
      ],
    };
  
    myChart = echarts.init(document.getElementById("yzhlqs") as HTMLElement);
    myChart.setOption(option);
  });
  </script>
  
  <style lang='less' scoped>
   .bottom {
    width: 100%;
    height: 100%;
    display: flex;
  }
  </style>
  